<template>
    <div class="page_container">
        <el-tabs v-model="activeName" @tab-click="tabChange">
            <el-tab-pane :label="`履约中${tabsCount.INBOX > 0 ? `(${tabsCount.INBOX})` : ''}`" 
                name="0" :disabled="loading"></el-tab-pane>
            <el-tab-pane :label="`已过期${tabsCount.DFBOX > 0 ? `(${tabsCount.DFBOX})` : ''}`" 
                name="1" :disabled="loading"></el-tab-pane>
        </el-tabs>
        <DataTableBar :data="tableData" :columns="columns" :config="config"
            :total="total" :pages="pages" :loading="loading"
            @search="search" @reset="searchReset" @refresh="refresh"
            @currentChange="currentChange" @sizeChange="sizeChange"
            @addBefore="addBefore">
            <template v-slot:tablerow="scope">
                <el-button type="primary" link class="linkBtn">附件详情</el-button>
            </template>
            <template v-slot:name="scope">
                <el-button type="primary" link v-if="scope.row.type">{{ scope.row.name || '-' }}</el-button>
                <span v-else>{{ scope.row.name || '-' }}</span>
            </template>
            <template v-slot:tag="scope">
                <el-tag v-for="tItem in scope.row.tag" style="margin-right: 3px;">{{ tItem.label }}</el-tag>
                <span v-if="!scope.row.tag || scope.row.tag.length <= 0">-</span>
            </template>
            <template v-slot:time="scope">
                <span>{{ formatDate.dateTimeAllFormat( scope.row.time || '-') }}</span>
            </template>
        </DataTableBar>
    </div>
</template>

<script setup>
    // 公司文件
    import { ref, onMounted } from "vue";
    import { ElMessage } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    import DataTableBar from "@/components/DataComponents/DataTableBar.vue"
    const { proxy } = getCurrentInstance();
    const activeName = ref('0');

    const pages = ref({ page_current: 1, page_size: 10 });
    const total = ref(0);
    const loading = ref(false);
    const searchParams = ref({});
    const selectrow = ref({});
    const operState = ref(false);
    const tableData = ref([
        { name: '前言', type: 0, time: '2023-12-30 08:00',},
        { name: '猎魔手册', type: 1, time: '2023-12-30 08:00',}
    ]);
    const tabsCount = ref({INBOX: 0, DFBOX: 2,});
    const columns = ref([
        { title: '合同编号',key: 'code', minWidth: 150, search: true,},
        { title: '项目名称',key: 'name', width: 150, search: true },
        { title: '批次',key: 'code', width: 150, },
        { title: '姓名',key: 'code', width: 150, },
        { title: '身份证号码',key: 'code', width: 150, },
        { title: '手机号',key: 'code', width: 150, },
        { title: '档案编号',key: 'code', width: 150, },
        { title: '档案柜',key: 'code', width: 150, },
        { title: '合同类型',key: 'time', width: 150, },
        { title: '合同期限',key: 'remark', width: 120, },
        { title: '合同起止日期',key: 'remark', width: 120, },
        { title: '更新时间',key: 'time', width: 150, },
    ]);
    const config = ref({
        index: true,
        addBtnHide: true,
        editBtnHide: true,
        removeBtnHide: true,
        editCustom: true,
        operBarHide: true,
    });
    const addBefore = () => {
        operState.value = false;
        selectrow.value = {};
        createEmailDrawerShow.value = true;
    };
    const editBefore = (rowData) => {
        operState.value = true;
        selectrow.value = rowData;
        createEmailDrawerShow.value = true;
    };
    const edit = (fromData, saveState) => {
        if(operState.value){
            return
        }
    };
    const tabChange = (value) => {
        activeName.value = value.paneName;
        pages.value.page_current = 1;
        getTablePages();
    };
    const currentChange = (current) => {
        pages.value.page_current = current;
        getTablePages();
    };
    const sizeChange = (size) => {
        pages.value.page_size = size;
        getTablePages();
    };
    const refresh = () => {
        getTablePages();
    };
    const search = (searchParam) => {
        searchParams.value = searchParam.value;
        getTablePages();
    }
    const searchReset = () => {
        searchParams.value = {};
        getTablePages();
    };
    const getTablePages = () => {
        // loading.value = true;
        // emailPages({
        //     current: pages.value.page_current,
        //     size: pages.value.page_size,
        //     mailStatus: mailStatus.value,
        //     userTypes: userTypes.value,
        //     ...searchParams.value
        // }).then(res => {
        //     tableData.value = res.data.records;
        //     total.value = res.data.total;
        //     loading.value = false;
        // });
    };
    onMounted(() => {
        getTablePages();
    })
</script>
<style scoped lang="scss">
</style>